<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
            + path + "/";
%>
<%-- 修改用户信息 --%>
<!DOCTYPE HTML>
<html>
<head>
    <style>

        .fileupload-block {
            position: relative;
            width: 100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            overflow: hidden;
            border: solid 1px #ddd;
            border-radius: 2px;
            cursor: default;
            margin-left: auto;
            margin-right: auto;
        }

        .fileupload-delete {
            display: inline-block;
            position: absolute;
            height: 18px;
            width: 18px;
            padding: 3px;
            top: 1px;
            right: 1px;
            line-height: 18px;
            cursor: pointer;
        }

        .fileupload-info {

        }

        .fileupload-file {
            font-size: 200px;
            display: inline-block;
            position: absolute;
            top: 0;
            right: 0;
            filter: alpha(opacity=0);
            -moz-opacity: 0;
            -khtml-opacity: 0;
            opacity: 0;
            cursor: pointer;
            width: 100px;
            height: 100px;
        }

        .fileupload-image {
            margin: auto;
        }
    </style>
    <base href="<%=basePath%>">

    <title>修改用户信息</title>

    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">

    <%-- 引用layui.css --%>
    <link rel="stylesheet" type="text/css" href="js/layui/css/layui.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/common.css"/>
    <link rel="stylesheet" type="text/css" href="<%=basePath%>css/font/iconfont.css?v=1.0.0" media="all">
    <link href="<%=basePath%>js/common/cropper/cropper.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript" src="<%=basePath%>js/common/jquery-1.11.3.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/vendor/jquery.ui.widget.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/jquery.iframe-transport.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/jQueryFileUpload/js/jquery.fileupload.js"></script>
    <script type="text/javascript" src="<%=basePath%>js/common/cropper/cropper.js"></script>
</head>

<body>
<div id="userUpd">
    <form class="layui-form" lay-filter="gcForm" id="gcForm"
          action="tvindex/updateHomePic.do" style="margin:40px;">


        <div class="layui-form-item">
            <label class="layui-form-label"><span
                    class="layui-badge-dot"></span>图片名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="creditMoney"
                       placeholder="请输入图片名称" autocomplete="off" class="layui-input" value="${name }">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">首页图片</label>
                <div class="layui-input-block">
                    <div class="fileupload-block"
                         style="width:${imgW}px;height:${imgH}px;">
                        <img class="fileupload-delete" id="Delete" onclick="deleteImage();"
                             style="position:absolute;z-index:20;display:none;" src="images/x.jpg"/>
                        <img class="fileupload-image" id="Img" src='${picPath}'
                             style="display:inline;width:${imgW}px;height:${imgH}px;"/>
                        <label for="updinput" class="fileupload-file" title="点击上传图片"
                               style="width:${imgW}px;height:${imgH}px;">
                            <input type="file" accept=".jpg,.gif,.png,.jpeg,.bmp" class="image" id="updinput"
                                   name="image" data-url="tvindex/uploadImage.do" style="display:none;" multiple/>
                        </label>
                        <input class="fileupload-input" id="Input" type="hidden" name="pic_path" value="${picPath}"/>
                        <input class="fileupload-input" id="fileId" type="hidden" name="fileId" value="${picPath}"/>
						<label><span class="text-dot"></span></label>
                        <input name="picId" type="hidden" value="${id}"/>
                    </div>

                    <div>
                        <input id="imgBtn" type="button" class="imgBtn"
                               onclick="upload();" style="display:none" value="上传选中图片"/>
                        <div class="" id="img-progress"></div>
                    </div>
                </div>
            </div>
        </div>

        <hr class="layui-bg-gray">
        <div class="layui-form-item">
            <div class="layui-input-block">
                <a id="btnSave" href="javascript:classSave();" title="提交" class="layui-btn layui-btn-sm">
                    <i class="layui-icon">&#xe654;</i>提交
                </a>
            </div>
        </div>
        <!-- 	<div class="layui-btn-group">

                            </div> -->
    </form>
</div>
<script type="text/javascript" src="js/layui/layui.js"></script>
<script type="text/javascript">
    layui.config({
        base: "<%=basePath%>/js/common/"
    }).use(["common", "element", "layer", "form", "table", "jquery"], function () {
        var elem = layui.element;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var $ = layui.jquery;

        layui.common.init();

        $("#updinput").fileupload({
            dataType: "json",
            maxFileSize: "500000",
            success: function (data) {
                if (data.statusCode == "200") {
                    var w = ${imgW};
                    var h = ${imgH};
                    $("#Img").attr("tValue", data.model);
                    $("#Img").attr("src", data.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "600");
                    $("#Delete").css("display", "block");
                    //初始化截图工具
                    $("#Img").cropper({aspectRatio: w / h});
                    mycroper = true;
                    $("#imgBtn").css("display", "block");
                } else if (data.statusCode == "300") {
                    layer.msg(data.message, {icon: 5, time: 2000});
                }
            }
        });
        //图片剪切
        var mycroper = false;
        //上传选中的图片部分并显示
        window.upload = function () {
            var delFile = $("#Img").attr("tValue");
            //获取截图工具选中的部分
            var cut = $("#Img").cropper("getCroppedCanvas").toDataURL("image/jpeg");
            cut = cut.substring(23);
            $.post("tvindex/uploadCanvas.do", {
                "canvasData": cut,
                "id": "${id}",
                "delFile": delFile
            }, function (json) {
                if (json.statusCode == "200") {
                    $("#Img").attr("src", json.forwardUrl).css("display", "block");
                    $("#image>object").css("height", "0");
                    $("#Delete").css("display", "block");
                    $("#Input").val(json.model);
                    if (mycroper) {
                        $("#Img").cropper("destroy");
                        mycroper = false;
                    }
                    $("#imgBtn").css("display", "none");
                }
                setTimeout(function () {
                }, 2000);
            }, "json");
        }
        //删除图片
        window.deleteImage = function () {
            $("#Img").removeAttr("src").css("display", "none");
            $("#image>object").css("height", 600);
            $("#Delete").css("display", "none");
            $("#Input").val("");
            //销毁截图工具
            if (mycroper) {
                $("#Img").cropper("destroy");
                mycroper = false;
            }
            $("#imgBtn").css("display", "none");
        };
        //监听提交  添加
        form.on('submit(updUser)', function (data) {
            layer.msg(JSON.stringify(data.field));
            //console.log(data.field.creditMoney)
            //console.log(data.field.creditSum)
            var creditMoney = data.field.creditMoney
            var creditId = data.field.creditId
            var creditSum = data.field.creditSum
            //console.log(creditId)
            $.ajax({
                type: "post",
                url: '',
                data: {
                    "creditMoney": creditMoney,
                    "creditId": creditId,
                    "creditSum": creditSum
                },
                dataType: "json",
                success: function (json) {
                    //console.log(json);
                    if (json.statusCode == 200) {
                        var index = parent.layer.getFrameIndex(window.name);
                        parent.layer.close(index);
                        parent.layer.msg(json.message, {
                            icon: 6,
                            time: 2000
                        });
                    } else {
                        layer.msg(json.message, {
                            icon: 5,
                            time: 2000
                        });
                    }
                }
            });
            return false;
        });
        window.classSaved = function (data) {
            if (data.statusCode == 200) {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                layer.msg(data.message, {icon: 6, time: 2000});
            } else {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
                layer.msg(data.message, {icon: 5, time: 2000});
            }
        };
        window.classSave = function () {
            var $this = $("#gcForm");
            $.post($this.attr("action"), $this.serialize(), classSaved, "json");
        };


    });
</script>
</body>
</html>
